<template>
	<view class="container">
		<scroll-view scroll-y="true" class="cate-container">
			<view class="cates">
				<view 
					:class="['cate', {active: index === activeIndex}]" 
					@tap="switchIndex(index)"
					v-for="(cate, index) in cates" :key="cate.id">
					{{cate.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="item-container">
			<view>
				<view class="item" v-for="item in items" :key="item.id" @tap="enterDetail(item.id)">
					<image :src="item.pic" mode="scaleToFill"></image>
					<view class="item-info">
						<text class="name">{{item.name}}</text>
						<text class="price">
							{{item.minPrice}}
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates: [],
				items: [],
				activeIndex: 0
			}
		},
		methods: {
			switchIndex(index) {
				this.activeIndex = index;
				this.fetchItems()
			},
			enterDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
			fetchCates() {
				this.$request('/shop/goods/category/all').then(res => {
					if (res.data.code === 0) {
						this.cates = res.data.data
						this.fetchItems()
					}
				})
			},
			fetchItems() {
				this.$request('/shop/goods/list/v2', {
					method: 'POST',
					data: {
						categoryId: this.cates[this.activeIndex].id
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.items = res.data.data.result
					}
					if (res.data.code === 700) {
						this.items = []
					}
				})
			}
		},
		onLoad() {
			this.fetchCates()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		display: flex;

		.cate-container {
			width: 250rpx;
			height: 100%;
			border-right: 1rpx solid #ccc;

			.cate {
				line-height: 40px;
				text-align: center;
				color: #333;
				font-size: 12px;

				&.active {
					color: #f66;
					background-color: #f1f1f1;
				}
			}
		}

		.item-container {
			width: 500rpx;
			height: 100%;

		}
	}
</style>